<template>
  <a-card :bordered="false" class="selectDemo-style" style="height:100%;padding-bottom:200px; ">

    <div class="table-page-search-wrapper">
      <a-form layout="inline" :form="form">


        <!--  字典下拉 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="性别">
              <j-dict-select-tag v-model="formData.sex" title="性别" dictCode="sex" placeholder="请选择性别"/>
              <!--  <j-dict-select-tag title="性别" dictCode="sex" disabled/>-->
            </a-form-item>
          </a-col>
          <a-col :span="6">选中值：{{ formData.sex}}</a-col>
        </a-row>

        <!--  字典表下拉 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="字典表下拉">
              <j-dict-select-tag v-model="formData.user" placeholder="请选择用户" dictCode="sys_user,realname,id"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中值：{{ formData.user}}</a-col>
        </a-row>

        <!--  带条件字典表下拉 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="字典表下拉(带条件)">
              <j-dict-select-tag v-model="formData.user2" placeholder="请选择用户" dictCode="sys_user,realname,id,username!='admin' order by create_time"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中值：{{ formData.user2}}</a-col>
        </a-row>


        <!-- 字典搜索  -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="字典搜索(同步)">
              <j-search-select-tag placeholder="请做出你的选择" v-model="formData.searchValue" :dictOptions="searchOptions">
              </j-search-select-tag>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中值：{{ formData.searchValue}}</a-col>
        </a-row>

        <!--  字典搜索 异步加载 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="字典搜索(异步)">
              <j-search-select-tag
                placeholder="请做出你的选择"
                v-model="formData.asyncSelectValue"
                dict="sys_depart,depart_name,id"
                :async="true">
              </j-search-select-tag>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中值：{{ formData.asyncSelectValue}}</a-col>
        </a-row>

        <!--  JMultiSelectTag -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="字典下拉(多选)">
              <j-multi-select-tag
                v-model="formData.selMuti"
                dictCode="sex"
                placeholder="请选择">
              </j-multi-select-tag>
            </a-form-item>
          </a-col>
          <a-col :span="6">多选组合(v-model)：{{ formData.selMuti }}</a-col>
        </a-row>

        <!--  部门选择控件 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="选择部门 自定义返回值">
              <j-select-depart v-model="orgCodes" :trigger-change="true" customReturnField="orgCode" :multi="true"></j-select-depart>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中的部门Code(v-decorator):{{ orgCodes }}</a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="选择部门">
              <j-select-depart v-model="departId" :multi="true"></j-select-depart>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中的部门ID(v-model):{{ departId }}</a-col>
        </a-row>

        <!--  通过部门选择用户控件 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="选择用户">
              <j-select-user-by-dep v-model="userIds" :multi="true"></j-select-user-by-dep>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中的用户(v-model):{{ userIds }}</a-col>
        </a-row>

        <!--  用户选择控件 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="选择用户">
              <j-select-multi-user v-model="multiUser" :query-config="selectUserQueryConfig"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中的用户(v-model):{{ multiUser }}</a-col>
        </a-row>

        <!-- 角色选择 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="选择角色">
              <j-select-role v-model="formData.selectRole" @change="changeMe"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中值：{{ formData.selectRole}}</a-col>
        </a-row>

        <!-- 职务选择 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="选择职务002">
              <j-select-position  :buttons="false" :disabled="false" v-model="formData.selectPosition" />
            </a-form-item>
          </a-col>
          <a-col :span="6">选中值：{{ formData.selectPosition}}</a-col>
        </a-row>

        <!--  JCheckbox -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="多选组合">
              <j-checkbox
                v-model="jcheckbox.values"
                :options="jcheckbox.options"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">多选组合(v-model)：{{ jcheckbox.values }}</a-col>
        </a-row>

        <!--  JCodeEditor -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="代码输入框" style="min-height: 120px">
              <j-code-editor
                language="javascript"
                v-model="jcodedditor.value"
                :fullScreen="true"
                style="min-height: 100px"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">代码输入框(v-model)：{{ jcodedditor.value }}</a-col>
        </a-row>

        <!--  JDate -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="日期选择框">
              <j-date v-model="jdate.value" :showTime="true" dateFormat="YYYY-MM-DD HH:mm:ss"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">日期选择框(v-model)：{{ jdate.value }}</a-col>
        </a-row>

        <!-- JEditor -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="富文本编辑器" style="min-height: 300px">
              <j-editor v-model="jeditor.value"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">富文本编辑器(v-model)：{{ jeditor.value }}</a-col>
        </a-row>

        <!-- JEllipsis -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="过长剪切">
              <j-ellipsis :value="jellipsis.value" :length="30"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">过长剪切：{{ jellipsis.value }}</a-col>
        </a-row>

        <!-- JSelectMultiple -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="多选下拉框">
              <j-select-multiple v-model="jselectMultiple.value" :options="jselectMultiple.options"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">多选下拉框(v-model)：{{ jselectMultiple.value }}</a-col>
        </a-row>

        <!-- JSelectMultiple -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="JModal弹窗">
              <a-button style="margin-right: 8px;" @click="()=>modal.visible=true">点击弹出JModal</a-button>
              <span style="margin-right: 8px;">全屏化：<a-switch v-model="modal.fullscreen"/></span>
              <span style="margin-right: 8px;">允许切换全屏：<a-switch v-model="modal.switchFullscreen"/></span>

            </a-form-item>

            <j-modal
              :visible.sync="modal.visible"
              :width="1200"
              :title="modal.title"
              :fullscreen.sync="modal.fullscreen"
              :switchFullscreen="modal.switchFullscreen"
            >

              <template v-for="(i,k) of 30">
                <p :key="k">这是主体内容，高度是自适应的</p>
              </template>

            </j-modal>

          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="树字典">
              <j-tree-dict v-model="formData.treeDict" placeholder="请选择树字典" parentCode="B01" />
            </a-form-item>
          </a-col>
          <a-col :span="12">选中的值(v-model)：{{ formData.treeDict }}</a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="下拉树选择">
              <j-tree-select
                v-model="formData.treeSelect"
                placeholder="请选择菜单"
                dict="sys_permission,name,id"
                pidField="parent_id"
                pidValue=""
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">选中的值(v-model)：{{ formData.treeSelect }}</a-col>
        </a-row>

        <a-row :gutter="24">selectDemo
          <a-col :span="18">
            <a-form-item label="下拉树多选">
              <j-tree-select
                v-model="formData.treeSelectMultiple"
                placeholder="请选择菜单"
                dict="sys_permission,name,id"
                pidField="parent_id"
                pidValue=""
                multiple
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">选中的值(v-model)：{{ formData.treeSelectMultiple }}</a-col>
        </a-row>

        <!-- 分类字典树 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="分类字典树">
              <j-category-select v-model="formData.selectCategory" pcode="B01" :multiple="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中的值(v-model)：{{ formData.selectCategory }}</a-col>
        </a-row>

        <!-- VueCron -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="cron表达式">
              <j-cron ref="innerVueCron" v-decorator="['cronExpression', { initialValue: '* * * * * ? *' }]" @change="setCorn"></j-cron>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="图片上传">
              <j-image-upload v-model="imgList"></j-image-upload>
            </a-form-item>
          </a-col>
          <a-col :span="6">选中的值(v-model)：{{ imgList }}</a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 80px;margin-bottom:10px;">
          <a-col :span="18">
            <a-form-item label="文件上传11">
              <j-upload v-model="fileList" :uploadType="uploadType"></j-upload>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            选中的值(v-model)：
            <j-ellipsis :value="fileList" :length="30" v-if="fileList.length>0"/>
          </a-col>
        </a-row>

        <!-- 省市县级联 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="省市县级联">
              <j-area-linkage v-model="formData.areaLinkage1" type="cascader"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">输入的值(v-model)：{{ formData.areaLinkage1 }}</a-col>
        </a-row>


        <!-- 省市县级联 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="省市县级联">
              <j-area-linkage v-model="formData.areaLinkage2" type="select"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">输入的值(v-model)：{{ formData.areaLinkage2 }}</a-col>
        </a-row>

        <!-- 功能示例：关闭当前页面 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="功能示例：关闭当前页面">
              <a-button type="primary" @click="handleCloseCurrentPage">点击关闭当前页面</a-button>
            </a-form-item>
          </a-col>
        </a-row>

        <!-- JPopup示例 -->
        <a-row :gutter="24">
          <a-col :span="18">
            <a-form-item label="JPopup示例">
              <j-popup v-model="formData.jPopup" code="demo" field="name" orgFields="name" destFields="name" :multi="true"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">选择的值(v-model)：{{ formData.jPopup }}</a-col>
        </a-row>

        <!---预览-->
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="图片预览">
              <a-button @click="previewImg">预览</a-button>
            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="音频预览">
              <a-button @click="previewAudio">预览</a-button>
            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="视频预览">
              <a-button @click="previewVideo">预览</a-button>
            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="pdf  预览">
              <a-button @click="previewPdf">预览</a-button>
            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="office预览">
              <a-button @click="previewDoc">预览</a-button>
            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="文件下载">
              <k-sys-file-download :sysFileObj="sysFile" :downloadMsg="downloadMsg" >
              </k-sys-file-download>
            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>


        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="文件预览" >
              <a-button @click="previewFile" type="primary" >文件预览</a-button>
              <k-preview-sys-file ref="KPreviewSysFile"></k-preview-sys-file>
            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="文件">
              <div>
                <div>
                  <a-icon type="file-pdf" />
                  <span>{{sysFile.fileName}}</span>
                </div>
                <span>
        <a-icon type="download" /><k-sys-file-download :sysFileObj="sysFile"  :downloadMsg="downloadMsg"></k-sys-file-download>
        </span>
                <span>
          <a-icon type="eye" /><a  @click="previewFile" type="primary" >预览</a>
        <k-preview-sys-file ref="KPreviewSysFile"></k-preview-sys-file>
          </span>
              </div>

            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>

      </a-form>
    </div>

  </a-card>
</template>

<script>

import JDictSelectTag from '../../components/dict/JDictSelectTag.vue'
import JSelectDepart from '@/components/ksourcebiz/JSelectDepart'
import JSelectUserByDep from '@/components/ksourcebiz/JSelectUserByDep'
import JSelectMultiUser from '@/components/ksourcebiz/JSelectMultiUser'
import JSelectRole from '@/components/ksourcebiz/JSelectRole'
import JCheckbox from '@/components/ksource/JCheckbox'
import JCodeEditor from '@/components/ksource/JCodeEditor'
import JDate from '@/components/ksource/JDate'
import JEditor from '@/components/ksource/JEditor'
import JEllipsis from '@/components/ksource/JEllipsis'
import JSlider from '@/components/ksource/JSlider'
import JSelectMultiple from '@/components/ksource/JSelectMultiple'
import JTreeDict from "../../components/ksource/JTreeDict.vue";
import JCron from "@/components/ksource/JCron.vue";
import JTreeSelect from '@/components/ksource/JTreeSelect'
import JSuperQuery from '@/components/ksource/JSuperQuery'
import JUpload from '@/components/ksource/JUpload'
import JImageUpload from '@/components/ksource/JImageUpload'
import JSelectPosition from '@comp/ksourcebiz/JSelectPosition'
import JCategorySelect from '@comp/ksource/JCategorySelect'
import JMultiSelectTag from '@comp/dict/JMultiSelectTag'
import JInput from '@comp/ksource/JInput'
import JAreaLinkage from '@comp/ksource/JAreaLinkage'
import JMarkdownEditor from '@/components/ksource/JMarkdownEditor/index'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import KPreviewSysFile from "@/components/file/KPreviewSysFile";

import KSysFileDownload from "@/components/file/KSysFileDownload";

export default {
  name: 'SelectDemo',
  inject:['closeCurrent'],
  components: {
    JMarkdownEditor,
    JAreaLinkage,
    JInput,
    JCategorySelect,
    JSelectPosition,
    JImageUpload,
    JUpload,
    JTreeDict,
    JDictSelectTag,
    JSelectDepart,
    JSelectUserByDep,
    JSelectMultiUser,
    JSelectRole,
    JCheckbox,
    JCodeEditor,
    JDate, JEditor, JEllipsis, JSlider, JSelectMultiple,
    JCron, JTreeSelect, JSuperQuery, JMultiSelectTag,
    JSearchSelectTag,
    KPreviewSysFile,
    KSysFileDownload
  },
  data() {
    return {
      //上传时可以自定义上传的路径为fastdfs 或者local
      uploadType:"fastdfs",
      downloadMsg:'下载',
      sysFile:{
        fileId:'1342122625936224258',
        fileName:'JAVA核心知识点整理.pdf',
        ext:'pdf',
      },
      selectList: [],
      selectedDepUsers: '',
      formData: {
        areaLinkage1: '110105',
        areaLinkage2: '140221',
        sex: 1
      },
      form: this.$form.createForm(this),
      departId: '57197590443c44f083d42ae24ef26a2c,a7d7e77e06c84325a40932163adcdaa6',
      orgCodes: 'A02A01,A02A02',
      userIds: 'admin',
      multiUser: 'admin,ksource',
      jcheckbox: {
        values: 'spring,jeecgboot',
        options: [
          { label: 'mysql', value: 'mysql' },
          { label: 'oracl', value: 'oracl' },
          { label: 'Spring', value: 'spring', disabled: true },
          { label: 'MyBaits', value: 'mybatis' }
        ]
      },
      jcodedditor: {
        value: `function sayHi(word) {
  alert(word)
}
sayHi('hello, world!')`
      },
      jdate: {
        value: '2019-5-10 15:33:06'
      },
      jeditor: {
        value: '<h2 style="text-align: center;">富文本编辑器</h2> <p>这里是富文本编辑器。</p>'
      },
      jellipsis: {
        value: '这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。这是一串很长很长的文字段落。'
      },
      jslider: {
        value: false
      },
      jselectMultiple: {
        options: [
          { text: '字符串', value: 'String' },
          { text: '整数型', value: 'Integer' },
          { text: '浮点型', value: 'Double' },
          { text: '布尔型', value: 'Boolean' }
        ],
        value: 'Integer,Boolean'
      },
      modal: {
        title: '这里是标题',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      cron: '',
      superQuery: {
        fieldList: [
          { type: 'input', value: 'name', text: '姓名', },
          { type: 'select', value: 'sex', text: '性别', dictCode: 'sex' },
          { type: 'number', value: 'age', text: '年龄', },
          {
            type: 'select', value: 'hobby', text: '爱好',
            options: [
              { label: '音乐', value: '1' },
              { label: '游戏', value: '2' },
              { label: '电影', value: '3' },
              { label: '读书', value: '4' },
            ]
          },
        ]
      },
      fileList:[],
      imgList:[],
      jInput: {
        type: 'like',
        options: [
          { value: 'like', label: '模糊（like）' },
          { value: 'ne', label: '不等于（ne）' },
          { value: 'ge', label: '大于等于（ge）' },
          { value: 'le', label: '小于等于（le)' },
        ],
      },
      content: '',
      searchOptions:[{
        text:"选项一",
        value:"1"
      },{
        text:"选项二",
        value:"2"
      },{
        text:"选项三",
        value:"3"
      }],

      // 选择用户查询条件配置
      selectUserQueryConfig: [
        {key: 'phone', label: '电话'},
      ],
    }
  },
  computed: {
    nameList: function() {

      var names = []
      for (var a = 0; a < this.selectList.length; a++) {
        names.push(this.selectList[a].name)
      }
      return names
    }
  },
  methods: {
    handleChange() {
    },
    getDepartIdValue() {
      return this.form.getFieldValue('departId')
    },
    getOrgCodesValue() {
      return this.form.getFieldValue('orgCodes')
    },
    changeMe() {
      console.log('you so ...  , change Me')
    },
    selectOK: function(data) {
      this.selectList = data
    },
    handleSelect: function() {
      this.$refs.selectDemoModal.add()
    },
    selectReset() {
      this.selectList = []
    },
    //通过组织机构筛选选择用户
    onSearchDepUser() {
      this.$refs.JSearchUserByDep.showModal()
      this.selectedDepUsers = ''
      this.$refs.JSearchUserByDep.title = '根据部门查询用户'
    },
    onSearchDepUserCallBack(selectedDepUsers) {
      this.selectedDepUsers = selectedDepUsers
    },
    handleJSliderSuccess(value) {
      this.jslider.value = value
    },
    setCorn(data){
      this.$nextTick(() => {
        this.form.cronExpression = data;
      })
    },

    handleCloseCurrentPage() {
      // 注意：以下代码必须存在
      // inject:['closeCurrent'],
      this.closeCurrent()
    },
    //预览图片
    previewImg(){
      this.$refs.KPreviewSysFile.showFile('timg', '10000078080016', 'jpg');
    },
    previewAudio(){
      this.$refs.KPreviewSysFile.showFile('My Everything', '10000084340004', 'm4a');
    },
    previewVideo(){
      //将url赋值给src
      this.$refs.KPreviewSysFile.showFile('V00608-175347', '10000083370004', 'mp4');
    },
    previewPdf(){
      this.$refs.KPreviewSysFile.showFile('公益诉讼智能辅助办案系统', '10000083170082', 'pdf');
    },
    previewDoc(){
      this.$refs.KPreviewSysFile.showFile('案源保存与更新操作过程', '10000083130004', 'docx');
    },
    previewFile(){
      this.$refs.KPreviewSysFile.previewFile(this.sysFile);
    },

  }
}
</script>
<style>
  .ant-card-body .table-operator {
    margin-bottom: 7px;
  }
  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }
  .selectDemo-style .table-page-search-wrapper .ant-form-item > .ant-form-item-label{
    width: 20%!important;
  }
  .selectDemo-style .ant-upload-list {
    float: left;
  }
</style>